<template>
	<view class="process-capability-page content">
		<u-navbar :fixed="false" :autoBack="true" title="过程能力分析" :safeAreaInsetTop="true"
			leftIconColor="#fff"></u-navbar>

		<!-- <scroll-view class="scroll-container" scroll-y> -->
		<view class="flex-auto" style="padding: 10px;">
			<!-- 过程能力指标卡片 -->
			<view class="index-cards">
				<view class="index-card">
					<text class="index-label">CP</text>
					<text class="index-value">{{ processIndexes.CP ? processIndexes.CP.toFixed(2) : '--' }}</text>
					<text class="index-desc">短期过程能力</text>
					<text class="index-status" :class="getStatusClass('CP', processIndexes.CP)">
						{{ getStatusText('CP', processIndexes.CP) }}
					</text>
				</view>
				<view class="index-card">
					<text class="index-label">CPK</text>
					<text class="index-value">{{ processIndexes.CPK ? processIndexes.CPK.toFixed(2) : '--' }}</text>
					<text class="index-desc">短期能力指数</text>
					<text class="index-status" :class="getStatusClass('CPK', processIndexes.CPK)">
						{{ getStatusText('CPK', processIndexes.CPK) }}
					</text>
				</view>
				<view class="index-card">
					<text class="index-label">PP</text>
					<text class="index-value">{{ processIndexes.PP ? processIndexes.PP.toFixed(2) : '--' }}</text>
					<text class="index-desc">长期过程能力</text>
					<text class="index-status" :class="getStatusClass('PP', processIndexes.PP)">
						{{ getStatusText('PP', processIndexes.PP) }}
					</text>
				</view>
				<view class="index-card">
					<text class="index-label">PPK</text>
					<text class="index-value">{{ processIndexes.PPK ? processIndexes.PPK.toFixed(2) : '--' }}</text>
					<text class="index-desc">长期性能指数</text>
					<text class="index-status" :class="getStatusClass('PPK', processIndexes.PPK)">
						{{ getStatusText('PPK', processIndexes.PPK) }}
					</text>
				</view>
			</view>

			<!-- 规格限配置 -->
			<view class="spec-limits">
				<text class="spec-title">规格限设置</text>
				<view class="spec-values">
					<view class="spec-item">
						<text>下限 (LSL): {{ specLimits.LSL }}</text>
					</view>
					<view class="spec-item">
						<text>目标值: {{ specLimits.target }}</text>
					</view>
					<view class="spec-item">
						<text>上限 (USL): {{ specLimits.USL }}</text>
					</view>
				</view>
			</view>

			<!-- 直方图与分布验证 -->
			<view class="distribution-section">
				<text class="section-title">数据分布与直方图</text>
				<!-- 直方图图表（确保chartData始终有效） -->
				<qiun-data-charts type="bar" :chartData="histogramData" :canvas2d="true" width="750rpx" height="400rpx"
					:lazyLoad="true" />

				<!-- 正态性检验结果 -->
				<view class="normal-test">
					<text class="test-label">正态性检验:</text>
					<text class="test-result">{{ normalTestResult }}</text>
					<text class="test-desc">(P值>0.05，数据符合正态分布)</text>
				</view>
			</view>

			<!-- 改进建议 -->
			<view class="improvement-section">
				<text class="section-title">改进建议</text>
				<view class="suggestions">
					<ul>
						<li>
							<text> CPK={{ processIndexes.CPK ? processIndexes.CPK.toFixed(2) : '--' }}
								< {{ processIndexes.CPK < 1 ? '1.0' : '1.33' }}，需调整过程中心</text>
						</li>
						<li>
							<text>短期目标：3个月内将CPK提升至≥1.33，CP≥1.67</text>
						</li>
						<li>
							<text>长期目标：PPK稳定在≥1.33，减少过程波动（当前PP={{ processIndexes.PP ? processIndexes.PP.toFixed(2) : '--' }}）</text>
						</li>
						<li>
							<text>优先改进方向：设备校准（减少系统性偏移）</text>
						</li>
					</ul>
				</view>
			</view>
		</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import {
		computeProcessIndex,
		normalTest
	} from '@/common/comFun/spc-utils.js';

	export default {
		data() {
			return {
				// 规格限（可从接口获取）
				specLimits: {
					LSL: 7.5, // 下限
					USL: 12.5, // 上限
					target: 10 // 目标值
				},
				// 过程数据（实际项目从控制图同步或接口获取）
				processData: [
					8.2, 9.5, 10.1, 7.8, 9.9, 11.2, 10.3, 11.1, 9.8,
					8.7, 9.3, 10.5, 8.9, 10.2, 11.5, 9.6, 10.8, 8.5,
					9.1, 10.4, 11.3, 8.3, 9.7, 10.9, 9.2 // 25组样本数据
				],
				// 过程能力指标
				processIndexes: {
					CP: null,
					CPK: null,
					PP: null,
					PPK: null
				},
				// 直方图数据（强制初始化完整结构）
				histogramData: {
					categories: [],
					series: [],
					xAxis: {
						name: '测量值',
						limitLine: []
					},
					yAxis: {
						name: '频数'
					}
				},
				// 正态性检验结果
				normalTestResult: ""
			};
		},
		onLoad() {
			// 确保页面加载时直方图数据已初始化
			this.initHistogramData();
			// 计算过程能力
			this.calculateProcessCapability();
		},
		methods: {
			// 初始化直方图基础结构（防止undefined）
			initHistogramData() {
				this.histogramData = {
					categories: [],
					series: [],
					xAxis: {
						name: '测量值',
						limitLine: [{
								value: this.specLimits.LSL,
								name: 'LSL',
								color: '#f56c6c'
							},
							{
								value: this.specLimits.USL,
								name: 'USL',
								color: '#f56c6c'
							},
							{
								value: this.specLimits.target,
								name: '目标',
								color: '#67c23a',
								lineType: 'dashed'
							}
						]
					},
					yAxis: {
						name: '频数'
					}
				};
			},

			// 计算过程能力指标
			calculateProcessCapability() {
				// 数据校验
				if (!this.processData || this.processData.length === 0) {
					console.error('过程数据为空，无法计算');
					this.normalTestResult = '无数据可分析';
					return;
				}

				try {
					// 计算过程能力指标
					this.processIndexes = computeProcessIndex(this.processData, this.specLimits);
					// 生成直方图数据（使用全新对象赋值）
					this.generateHistogramData();
					// 正态性检验
					this.normalTestResult = normalTest(this.processData);
				} catch (e) {
					console.error('计算失败：', e);
					this.normalTestResult = '分析失败：' + e.message;
					// 异常时重置直方图数据
					this.initHistogramData();
				}
			},

			// 生成直方图数据（使用函数返回新对象，避免引用问题）
			generateHistogramData() {
				const data = this.processData;
				const {
					LSL,
					USL,
					target
				} = this.specLimits;

				// 计算分组（逻辑不变）
				const minVal = Math.min(...data);
				const maxVal = Math.max(...data);
				const actualMin = Math.min(minVal, LSL);
				const actualMax = Math.max(maxVal, USL);
				const binCount = 8;
				const binWidth = (actualMax - actualMin) / binCount;

				const bins = Array.from({
					length: binCount
				}, (_, i) => {
					const start = actualMin + i * binWidth;
					const end = start + binWidth;
					const count = data.filter(v => v >= start && v < end).length;
					return {
						name: `${start.toFixed(1)}-${end.toFixed(1)}`,
						value: count
					};
				});

				// 关键：用 bar 类型模拟直方图
				this.histogramData = {
					categories: bins.map(bin => bin.name), // x轴分组标签
					series: [{
						name: '频数',
						data: bins.map(bin => bin.value), // 直接传递数值（bar类型支持）
						color: '#409eff',
						barWidth: '80%' // 调整柱宽，更接近直方图效果
					}],
					xAxis: {
						name: '测量值',
						rotate: 45, // 标签旋转，避免重叠
						limitLine: [{
								value: LSL,
								name: 'LSL',
								color: '#f56c6c'
							},
							{
								value: USL,
								name: 'USL',
								color: '#f56c6c'
							},
							{
								value: target,
								name: '目标',
								color: '#67c23a',
								lineType: 'dashed'
							}
						]
					},
					yAxis: {
						name: '频数',
						min: 0 // 确保y轴从0开始
					}
				};
			},

			// 获取指标状态样式
			getStatusClass(type, value) {
				if (value === null) return 'status-ok';
				switch (type) {
					case 'CP':
						return value >= 1.33 ? 'status-good' : (value >= 1.0 ? 'status-ok' : 'status-bad');
					case 'CPK':
					case 'PPK':
						return value >= 1.33 ? 'status-good' : (value >= 1.0 ? 'status-ok' : 'status-bad');
					case 'PP':
						return value >= 1.33 ? 'status-good' : (value >= 1.0 ? 'status-ok' : 'status-bad');
					default:
						return 'status-ok';
				}
			},

			// 获取指标状态文本
			getStatusText(type, value) {
				if (value === null) return '无数据';
				switch (type) {
					case 'CP':
						return value >= 1.33 ? '优秀' : (value >= 1.0 ? '合格' : '不足');
					case 'CPK':
					case 'PPK':
						return value >= 1.33 ? '优秀' : (value >= 1.0 ? '合格' : '风险');
					case 'PP':
						return value >= 1.33 ? '优秀' : (value >= 1.0 ? '合格' : '不足');
					default:
						return '正常';
				}
			}
		}
	};
</script>

<style scoped>
	.process-capability-page {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.scroll-container {
		flex: 1;
		overflow-y: auto;
		padding: 16px;
		box-sizing: border-box;
	}



	/* 指标卡片样式 */
	.index-cards {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15px;
		margin-bottom: 25px;
	}

	.index-card {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
		text-align: center;
	}

	.index-label {
		font-size: 16px;
		color: #666;
		display: block;
	}

	.index-value {
		font-size: 24px;
		font-weight: bold;
		color: #333;
		margin: 8px 0;
		display: block;
	}

	.index-desc {
		font-size: 12px;
		color: #999;
		display: block;
	}

	.index-status {
		font-size: 14px;
		margin-top: 5px;
		display: block;
	}

	.status-good {
		color: #4cd964;
		/* 优秀-绿色 */
	}

	.status-ok {
		color: #ff9800;
		/* 合格-橙色 */
	}

	.status-bad {
		color: #f56c6c;
		/* 不足/风险-红色 */
	}

	/* 规格限样式 */
	.spec-limits {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 25px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	}

	.spec-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
		display: block;
	}

	.spec-values {
		display: flex;
		justify-content: space-between;
	}

	.spec-item text {
		font-size: 14px;
		color: #666;
	}

	/* 分布与改进建议样式 */
	.distribution-section,
	.improvement-section {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 25px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		display: block;
	}

	.normal-test {
		display: flex;
		align-items: center;
		margin-top: 15px;
		padding-top: 15px;
		border-top: 1px dashed #eee;
		flex-wrap: wrap;
		/* 适配小屏幕 */
	}

	.test-label {
		font-size: 14px;
		color: #666;
		margin-right: 8px;
	}

	.test-result {
		font-size: 14px;
		color: #4cd964;
		margin-right: 8px;
	}

	.test-desc {
		font-size: 12px;
		color: #999;
	}

	.suggestions text {
		display: block;
		font-size: 14px;
		color: #666;
		margin: 8px 0;
		line-height: 1.5;
	}
</style>